<template>
	<Modal v-model="modal" @on-ok="ok('form')" @on-cancel="cancel('form')" :loading="loading">
		<IForm :model="form" ref="form" :label-width="160" :rules="formRule" >
			<IInput v-model="form.id" class="hide" />
	        <FormItem prop="content" label="短信模版内容">
	            <IInput v-model="form.content" size="large"  type="textarea" :rows="4" placeholder="短信模版内容" />
	        </FormItem>
	        <FormItem prop="config_id" label="短信服务商">
	            <ISelect v-model="form.config_id">
			        <IOption v-for="config in config_ids" :value="config.id" :key="config.id">{{config.desc}}</IOption>
			    </ISelect>
	        </FormItem>
	        <FormItem prop="serviceId" label="服务商模版ID">
	            <IInput v-model="form.serviceId" size="large" placeholder="服务商模版ID" />
	        </FormItem>
	        <FormItem prop="module" label="短信所属模块">
	            <ISelect v-model="form.module">
			        <IOption v-for="module in modules" :value="module.value" :key="module.value">{{module.name}}</IOption>
			    </ISelect>
	        </FormItem>
	    </IForm>
	</Modal>
</template>
<script>
	import Modal from 'iview/src/components/modal';
    import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';
    import { Select, Option, OptionGroup } from 'iview/src/components/select';

    import Axios from 'admin/config/axios';
    
	export default {
		components:{
            Modal,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
			'ISelect' : Select,
			'IOption' : Option,
        },
        data () {
        	const validateQnique=(rule , value ,callback)=>{
        		if(value==''){
        			callback();
        		}
	            Axios.Configs.SmsTpl.CheckUniqueModule({id:this.form.id,config_id:this.form.config_id,module:value})
	            .then(res =>{
	            	if(!res){
	            		callback();
	            		return false;
	            	}
	                if(res.data.count>0){
	                	callback(new Error('已存在相同的短信模版,请更换模块'));
	                }
	                callback();
	            })
	        };
            return {
                modal: false,
                loading : true,
                form :{
                	id : 0,
                	content : '',
                	config_id  : 0,
                	serviceId : '',
                	module : '',
                },
                config_ids : [],
                modules:[],
                formRule : {
	                content: [
	                    { required: true, message: '请填写模版内容', trigger: 'blur' },
	                ],
	                config_id: [
	                    { required: true, message: '请选择一个短信服务商', trigger: 'blur',type: 'number',min:1 },
	                ],
	                module : [
	                	 { validator: validateQnique, trigger: 'change'}
	                ]
	            },
            }
        },
        methods: {
        	init(){
        		this.form.id = 0;
        		this.form.content = '';
        		this.form.config_id = '';
        		this.form.serviceId = '';
        		this.form.module = '';
        	},
            changeLoading(){
	            this.loading = false;
	            this.$nextTick(() => {
	              this.loading = true;
	            });
	        },
        	ok(name){
        		this.$refs[name].validate(valid => {
        			if (!valid) {this.changeLoading();return false;}
        			Axios.Configs.SmsTpl.Update(this.form)
		            .then(res =>{
		            	this.changeLoading();
		            	if(!res) return false;
		                this.modal = false;
		                this.$refs[name].resetFields();
		                this.init();
		                this.$emit('resetTable');
		            })
		            .catch(error =>{
		                this.$Message.error(error);
		            })
        		})
        	},
        	cancel(name){
        		this.$refs[name].resetFields();
        		this.init();
        	}
        },
        created(){
        	
        },
    }
</script>